<template>
	<view>
		<navigationBar title="数据存储" btns="Storage" @next_step="next_step"></navigationBar>
		<!-- 通过setStorage存储数据 -->
		<u-button class="btns" type="error" @click="to_storage">Storage</u-button>
		<!-- 通过vuex存储数据 -->
		<u-button class="btns" type="error" @click="get_vuex">Vuex</u-button>
		
		
		
		
	</view>
</template>

<script>
	import navigationBar from "@/components/navigation-bar/navigation-bar.vue" //导航栏
	import { mapState,mapMutations } from "vuex"
	export default {
		components:{
			navigationBar
		},
		data() {
			return {
				list:{
					name:'时分',
					age:22,
					
				}
			}
		},
		onLoad() {
			// 页面一加载就将数据存储到Vuex之中，
			this.setState({
				type:'student',
				item:this.list
			})
		},
		computed:{
			...mapState(['student'])
		},
		methods: {
			...mapMutations(['setState']),
			//存储数据setStorage
			to_storage(){
				uni.setStorage({
					key:'student',
					data:this.list,
					success: function () {
					  console.log('success');
					}
				})
			},
			//跳转去获取数据getStorage
			next_step(){
				console.log('0')
				uni.navigateTo({
					url:'/API/Storage_testdata'
				})
			},
			
			//vuex获取数据
			get_vuex(){
				//获取存储在vuex中的数据
				console.log(this.student)
				//获取数据后立刻将vuex中的数据进行清除
				this.setState({
					type:'student',
					item:{}
				})
				
			}
			
			
			
			
			
		}
	}
</script>

<style>
	.btns{
		width: 200rpx;
		margin-top: 10rpx;
	}
</style>
